<template>
	<div class="index">
    <div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">审批消息</div>
    </div>
    <div style="padding: 0.3rem;">
      <div class="flexcc" style="padding: 0rem 0 0.3rem 0; font-weight: bold; font-size: 0.3rem;">
        <van-badge :content="shuangliang1" style="margin-right: 0.5rem; padding-bottom: 0.1rem; border-bottom:2px solid #fff;"  :class="act == 1?'acts':''" >
          <div @click="actchange(1)">拜访审批</div>
        </van-badge>
        <van-badge :content="shuangliang2" style=" padding-bottom: 0.1rem;  border-bottom:2px solid #fff;" :class="act == 2?'acts':''"  @click="acts">
          <div @click="actchange(2)">客户审批</div>
        </van-badge>
      </div>
      <baifangshenpi ref="baifangshenpi1" @huoqutiaoshu1="huoqutiaoshu1" v-if="act == 1"></baifangshenpi>
      <kehushenpi ref="kehushenpi1" @huoqutiaoshu2="huoqutiaoshu2" v-if="act == 2"></kehushenpi>
    </div>
	</div>
</template>

<script>
  import kehushenpi from './kehushenpi.vue';
  import baifangshenpi from './baifangshenpi.vue';
  var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
	export default {
		name: 'kehulist',
    components:{
      kehushenpi,baifangshenpi
    },
		data() {
			return {
        act:"",
        shuangliang1:0,
        shuangliang2:0,
        all:{
          fzrid:JSON.parse(localStorage.getItem('person')).userid,
          lx:2
        }
			}
		},
		created() {
      this.refreshPage()

      if(this.$route.query.bf){
        this.act = 1
      }
      if(this.$route.query.kh){
        this.act = 2
      }
		},
		mounted() {

		},
		methods: {
      refreshPage() {
        axios.get('/Process/queryCustomerProcessList',{params:this.all}).then((response)=>{
        	if (response.data.state == 200) {
            this.shuangliang2 = response.data.data.length
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
        axios.get('/Process/queryVisitProcessList',{params:this.all}).then((response)=>{
        	if (response.data.state == 200) {
            this.shuangliang1 = response.data.data.length
        	} else {
            vant.Toast(response.data.msg);
        	}
        })

        // axios.get('/Message/queryMessageList',{params:this.all}).then((response)=>{
        // 	if (response.data.state == 200) {
        //     this.list = response.data.data
        //     this.list.forEach(item=>{
        //       if(item.lx == 1){

        //       }
        //     })
        // 	} else {
        //     vant.Toast(response.data.msg);
        // 	}
        // })
      },
      actchange:function(v){
        this.act = v
      },
      huoqutiaoshu1:function(v){
        this.shuangliang1 = v
      },
      huoqutiaoshu2:function(v){
        this.shuangliang2 = v
      }
		}
	}
</script>


<style scoped >
  .acts{border-bottom:2px solid #1989fa !important; color: #1989fa !important;}



</style>
